<template>
  <div class="home-page">
    <div class="title">基本信息
      <div class="justify-content-center">
        <div class="btn justify-content-center" @click="getBasicInformation()">
          <img class="refresh" src="../assets/images/icon-refresh.png" />
          <span class="fs18 color505971">刷新</span>
        </div>
        <div class="btn justify-content-center ml10" @click="showEquipment()">
          <img class="refresh" src="../assets/images/icon-refresh.png" />
          <span class="fs18 color505971">设备</span>
        </div>
      </div>
		</div>
    <div class="basic-information" v-if="basicInformation">
      <div class="col4">
        <div class="key">任务名称</div>
        <div class="val">{{ basicInformation.taskName }}</div>
      </div>
      <div class="col4">
        <div class="key">系统代号</div>
        <div class="val">{{ basicInformation.taskCode }}</div>
      </div>
      <div class="col3">
        <div class="key">任务总数</div>
        <div class="val">{{ basicInformation.taskNum }}套</div>
      </div>
      <div class="col3">
        <div class="key">下发套数</div>
        <div class="val">{{ basicInformation.sendNum }}套</div>
      </div>
      <div class="col5">
        <div class="key">总体进度</div>
        <div class="val align-item-center">
          <div class="progress">
            <el-progress
              :percentage="percentage"
              :stroke-width="13"
              :show-text="false"
              :color="`#285FE3`"
            ></el-progress>
          </div>
          {{ basicInformation.compNum }}/{{ basicInformation.taskNum }}套
        </div>
      </div>
      <div class="col20 mt25">
        <div class="key">任务简介</div>
        <div class="val">
          <textarea
            v-if="editing"
            v-model="basicInformation.taskDesc"
          ></textarea>
          <span v-else>{{ basicInformation.taskDesc }}</span>
        </div>
      </div>
      <div class="btns">
        <div class="detail" @click="gotaskDetail">
          <img src="../assets/images/icon-detail.png" />详细设置
        </div>
        <div class="edit" @click="editHandle">
          <img src="../assets/images/icon-edit-blue.png" />{{
            editing ? "保存" : "编辑"
          }}
        </div>
        <div class="setting" @click="setBianh">
          <img src="../assets/images/icon-detail.png" />编号设置
        </div>
      </div>
    </div>
    <div class="title">任务详情</div>
    <div class="task-detail">
      <div class="theader">
        <div class="">系统编号</div>
        <div class="">齐套情况</div>
        <div class="">发送状态</div>
        <div class="">执行操作端</div>
        <div class="">试验结果</div>
        <!-- <div class="">报告</div> -->
        <div class="">试验状态</div>
        <div class="">操作</div>
      </div>
      <div class="tbodys">
        <div
          class="tbody"
          v-for="(item, index) in taskDetailList"
          :key="item.id"
        >
          <el-tooltip placement="bottom" effect="light">
            <div slot="content" class="fs18">{{ item.matchNames }}</div>
            <div class="text-overflow">{{ item.matchNames }}</div>
          </el-tooltip>
          <div
            class="color285FE3 cursor-pointer text-underline"
            @click="showQiSetHandle(item)"
          >
            查看详情
          </div>
          <div class="">
            {{ item.sendStatus.code == "Y" ? "已下发" : "未下发" }}
          </div>
          <div class="">{{ item.optClientName }}</div>
          
          <!-- v-if="item.groupStatus.code == 'COMP'" -->
          <div
            class="color285FE3 cursor-pointer text-underline"
            @click="showTaskResultHandle(item)"
          >
            查看
          </div>
          <!-- <div class="" v-else>查看</div> -->
          <div class="color00A65E">{{ item.groupStatus.message }}</div>
          <div>
            <el-button size="mini" v-if="item.sendStatus.code == 'Y' && (item.groupStatus.message == '未回传' || item.groupStatus.message == '已经回传')" @click="taskDel(item)">删除</el-button>
            <el-button size="mini" v-else disabled>删除</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="title">任务操作</div>
    <div class="task-operation">
      <div class="content">
        <div class="op-item">
          <div class="key">选择下发任务：</div>
          <div class="val">
            <el-radio-group
              v-model="taskCheck"
              style="display: flex; flex-direction: column"
            >
              <el-radio
                v-for="item in taskDetailList"
                :key="item.id"
                :label="item.id"
                :disabled="item.sendStatus.code == 'Y' ? true : false"
                >{{ basicInformation.taskName }}-{{ item.matchNames }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
        <div class="line"></div>
        <div class="op-item">
          <div class="key">选择在线操作端区域：</div>
          <div class="val">
            <el-radio-group
              v-model="terminal"
              style="display: flex; flex-direction: column"
            >
              <el-radio
                v-for="item in terminalData"
                :key="item.code"
                :label="item.code"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="btns">
        <div class="issued" @click="issued">
          <img src="../assets/images/icon-down.png" />任务下发
        </div>
        <!-- <div class="refresh">
                <img src="../assets/images/icon-refresh-1.png">任务更新</div> -->
      </div>
    </div>
    <QiSet v-if="showQiSet" :taskData="taskData" @cancel="cancelQiSet"></QiSet>
    <TestResults
      v-if="showTestResults"
      :taskData="taskData"
      @cancel="cancelTestResults"
    ></TestResults>
    <FactoryNumber
      v-if="showFn"
      :id="basicInformation.id"
      :taskName="basicInformation.taskName"
      @cancel="cancelFn"
    ></FactoryNumber>
    <Equipment v-if="equipmentShow" @cancel="cancelEquipment"></Equipment>
    <issued-loading v-if="issuedLoadingS" :lefttime="lefttime" :showProgressR="showProgressR"></issued-loading>
  </div>
</template>

<script>
import QiSet from "@/components/QiSet";
import TestResults from "@/components/TestResults";
import FactoryNumber from "@/components/FactoryNumber";
import Equipment from "@/components/Equipment";
import IssuedLoading from "@/components/issued-loading"
export default {
  name: "HomePage",
  components: { QiSet, TestResults, FactoryNumber, Equipment, IssuedLoading },
  data() {
    return {
      bpmsId: "",
      basicInformation: null,
      editing: false,
      taskDetailList: [],
      taskList: [],
      taskCheck: "",
      terminalData: [],
      terminal: "",
      taskData: "",
      showTestResults: false,
      showQiSet: false,
      showFn: false,
      equipmentShow: false,
      issuedLoadingS: false,
      lefttime: 5,
      showProgressR: false
    };
  },
  computed: {
    percentage: function () {
      return (
        (this.basicInformation.compNum / this.basicInformation.taskNum) * 100
      );
    },
  },
  created() {
    this.bpmsId = this.$route.query.modelId ? this.$route.query.modelId : 140;
    this.getBasicInformation();
  },
  methods: {
    randomFrom(lowerValue, upperValue) {
      return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
    },
		editHandle() {
			if (this.editing) {
				this.axios.taskSave({
					list: [this.basicInformation]
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.editing = false
					} else {
						this.$message.error(res.msg)
					}
				})
			} else {
				this.editing = true
			}
		},
    getBasicInformation() {
      let _this = this;
      _this.axios
        .getBasicInformation({
          bpmsId: this.bpmsId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.basicInformation = res.data;
            _this.getTaskGroup();
            _this.getTaskCanUseList();
            _this.getTerminal();
          }
        })
        .catch(function (error) {
          _this.$message.error(error.msg);
        });
    },
    showEquipment() {
      this.equipmentShow = true
    },
    cancelEquipment() {
      this.equipmentShow = false
    },
    getTaskGroup() {
      let _this = this;
      _this.axios
        .getTaskGroup({
          taskId: _this.basicInformation.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.taskDetailList = res.data;
          }
        })
        .catch(function (error) {
          _this.$message.error(error.msg);
        });
    },
    // 查询可分配任务
    getTaskCanUseList() {
      let _this = this;
      let params = {
        taskId: _this.basicInformation.id,
      };
      _this.axios
        .getTaskCanUse(params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.taskList = res.data.list;
          }
        })
        .catch(function (error) {
          _this.$message.error(error.msg);
        });
    },
    // 查询操作终端
    getTerminal() {
      let _this = this;
      _this.axios
        .getTerminal({})
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.terminalData = res.data;
          }
        })
        .catch(function (error) {
          _this.$message.error(error.msg);
        });
    },
    showTaskResultHandle(row) {
      this.taskData = row;
      this.showTestResults = true;
    },
    cancelTestResults() {
      this.showTestResults = false;
    },
    showQiSetHandle(row) {
      console.log(row);
      this.taskData = row;
      this.showQiSet = true;
    },
    cancelQiSet() {
      this.showQiSet = false;
    },
    issued() {
      let _this = this;
      let terminalName = "";
      _this.terminalData.map((item) => {
        if (_this.terminal == item.code) {
          terminalName = item.name;
        }
      });
      if (_this.taskCheck == "") {
        _this.$message({
          message: "请选择下发任务",
          type: "warning",
        });
      } else if (terminalName == "") {
        _this.$message({
          message: "请选择操作端",
          type: "warning",
        });
      } else {
        let param = {
          groupIds: _this.taskCheck,
          optClientCode: _this.terminal,
          optClientName: terminalName,
        };
        _this.issuedLoadingS = true;
        _this.lefttime = _this.randomFrom(5, 10);
        _this.axios
          .issuedTaskGroup(param)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              setTimeout(() => {
                _this.showProgressR = true;
                setTimeout(() => {
                  _this.showProgressR = false;
                  _this.issuedLoadingS = false;
                }, 1000)
              }, _this.lefttime * 1000);
              _this.getBasicInformation()
            } else {
              _this.showProgressR = false;
              _this.issuedLoadingS = false;
              _this.$message.error(res.msg);
            }
          })
          .catch(function (error) {
            _this.showProgressR = false;
            _this.issuedLoadingS = false;
            _this.$message.error(error.msg);
          });
      }
    },
    setBianh() {
      this.showFn = true;
    },
    cancelFn(refresh) {
			if (refresh == 1) {
				this.getBasicInformation()
			}
      this.showFn = false;
    },
    //点击任务进入对应任务详情
    gotaskDetail() {
      this.$store.commit("actModule", 0);
      this.$router.push({
        path: "/task",
        query: {
          taskName: this.basicInformation.taskName,
          taskId: this.basicInformation.id,
        },
      });
    },
    taskDel(row) {
      let _this = this;
      let confirmText = '确定删除本任务？';
      if (row.groupStatus.message == '已经回传') {
        confirmText = '本任务下面有业务数据，是否删除？'
      }
      _this.$confirm(confirmText, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          groupId: row.id,
          isConfirm: true
        }
        const loading = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        _this.axios.delTaskItem(params).then(res => {
          loading.close();
          if (res.code == 200) {
            _this.$message.success(res.msg);
            _this.getBasicInformation()
          } else {
            _this.$message.error(res.msg)
          }
        }).catch(error => {
          loading.close();
          _this.$message.error(error.msg)
        })
      }).catch(error => {

      })
    }
  },
};
</script>

<style scoped lang='less'>
.home-page {
  width: 100%;
  padding: 0 1rem 0.31rem;
  .title {
    width: 100%;
    height: 0.56rem;
    font-size: 0.28rem;
    color: #285fe3;
		display: flex;
		align-items: center;
		justify-content: space-between;
    padding-left: .25rem;
		.btn {
      width: .84rem;
      height: .34rem;
      line-height: .34rem;
      text-align: center;
      border: 1px solid #d0d6e3;
      background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
      border-radius: .03rem;
      cursor: pointer;
      .refresh {
        width: .19rem;
        height: .18rem;
        margin-right: .05rem;
      }
    }
  }
  .basic-information {
    width: 100%;
    border: 1px solid #d0d6e3;
    border-radius: 0.03rem;
    padding: 0.24rem 0.38rem 0.18rem;
    display: flex;
    flex-wrap: wrap;
    .key {
      font-size: 0.18rem;
      color: #505971;
    }
    .val {
      font-size: 0.24rem;
      color: #161d2e;
      margin-top: 0.14rem;
      .progress {
        width: 2.6rem;
        margin-right: 0.16rem;
      }
      textarea {
        border: 0.02rem solid #71b6ff;
        resize: none;
        outline: none;
        width: 100%;
        height: 0.6rem;
        font-family: "Microsoft YaHei,Arial";
        font-size: 0.24rem;
        color: #161d2e;
      }
    }
    .btns {
      width: 100%;
      margin-top: 0.13rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .detail {
        width: 1.6rem;
        height: 0.4rem;
        border: 1px solid #0ce392;
        background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
        border-radius: 0.03rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.21rem;
        color: #00a65e;
        cursor: pointer;
        img {
          width: 0.22rem;
          height: 0.24rem;
          margin-right: 0.09rem;
        }
      }
      .edit {
        width: 1.18rem;
        height: 0.4rem;
        border: 1px solid #316eff;
        background: linear-gradient(0deg, #dadde7 0%, #ffffff 100%);
        border-radius: 0.03rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.3rem;
        font-size: 0.21rem;
        color: #285fe3;
        cursor: pointer;
        img {
          width: 0.21rem;
          height: 0.24rem;
          margin-right: 0.07rem;
        }
      }
      .setting {
        width: 1.6rem;
        height: 0.4rem;
        border: 1px solid #0ce392;
        background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
        border-radius: 0.03rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.3rem;
        font-size: 0.21rem;
        color: #00a65e;
        cursor: pointer;
        img {
          width: 0.22rem;
          height: 0.24rem;
          margin-right: 0.09rem;
        }
      }
    }
  }
  .task-detail {
    width: 100%;
    .theader {
      width: 100%;
      height: 0.61rem;
      background: #f4f5f8;
      border: 1px solid #d0d6e3;
      border-radius: 0.03rem;
      font-size: 0.2rem;
      color: #505971;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        width: 14%;
        text-align: center;
      }
    }
    .tbodys {
      width: 100%;
      // height: 5.04rem;
      // overflow-y: scroll;
    }
    .tbodys::-webkit-scrollbar {
      display: none;
    }
    .tbodys {
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .tbody {
      width: 100%;
      height: 0.54rem;
      border: 1px solid #d0d6e3;
      border-radius: 0.03rem;
      font-size: 0.22rem;
      color: #161d2e;
      margin-top: 0.05rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        width: 14%;
        text-align: center;
      }
    }
  }
  .task-operation {
    width: 100%;
    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .op-item {
        width: 40%;
        flex: 1;
        border: 1px solid #D0D6E3;
        border-radius: .03rem;
        .key {
          width: 100%;
          height: .61rem;
          line-height: .61rem;
          padding-left: .6rem;
          background-color: #F4F5F8;
          font-size: 0.2rem;
          color: #505971;
        }
        .val {
          width: 100%;
          height: 2.28rem;
          overflow-y: scroll;
          padding-left: .6rem;
        }
      }
      .line {
        width: .44rem;
      }
    }
    .btns {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.38rem;
      .issued {
        width: 1.53rem;
        height: 0.4rem;
        border: 1px solid #316eff;
        background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
        border-radius: 0.03rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.21rem;
        color: #316eff;
        cursor: pointer;
        img {
          width: 0.24rem;
          height: 0.24rem;
          margin-right: 0.11rem;
        }
      }
      .refresh {
        width: 1.53rem;
        height: 0.4rem;
        border: 1px solid #ee5400;
        background: linear-gradient(0deg, #dadde7 0%, #ffffff 100%);
        border-radius: 0.03rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.3rem;
        font-size: 0.21rem;
        color: #ee5400;
        cursor: pointer;
        img {
          width: 0.22rem;
          height: 0.22rem;
          margin-right: 0.12rem;
        }
      }
    }
  }
}
.col3 {
  width: 15%;
}
.col4 {
  width: 20%;
}
.col5 {
  width: 25%;
}
.col20 {
  width: 100%;
}
/deep/ .el-radio {
  margin-top: 0.2rem;
}
/deep/ .el-radio__label {
  font-size: 0.24rem;
  color: #333;
}
/deep/ .el-radio__inner {
  width: 0.18rem;
  height: 0.18rem;
}
/deep/ .el-radio__input {
  vertical-align: inherit;
}
</style>
